<template>
	<view class="wanlgroups-user-container">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed bg-bgcolor" :style="{
					height: $wanlshop.wanlsys().height + 'px',
					paddingTop: $wanlshop.wanlsys().top + 'px',
					backgroundColor: common.modulesData.homeModules.page ? common.modulesData.homeModules.page.style.navigationBarBackgroundColor : '#f7f7f7',
					backgroundImage: 'url(' + $wanlshop.oss( common.appStyle.cart_nav_image, 0, 50, 1, 'transparent', 'png' ) + ')',
					color: common.modulesData.homeModules.page ? common.modulesData.homeModules.page.style.navigationBarTextStyle == '#ffffff' ? '#ffffff' : '#333333' : '',
				}">

				<view class="content" :style="{ top: $wanlshop.wanlsys().top + 'px' }">
					直播
				</view>
			</view>
		</view>
		<view class="wanlgroups-user-container__list bg-white">

			<view class="main">
				<view v-show="keys === currentId" v-for="(data, keys) in navList" :key="keys">

					<view class="list" v-if="data.dataList.length > 0">
						<view class="item" v-for="(item, index) in data.dataList" :key="index" @click="onClick(item)">
							<view v-if="item.state === 'normal'" class="examine radius-bock" :style="{
									backgroundImage:
										'url(' + item.image + ')'
								}" >
								<view class="cover radius-bock" :style="{
										backgroundImage:
											'url(' + item.image + ')'
									}" />
								<view v-if="item.type === 'video'" class="state padding-sm text-white text-xxxl">
									<text class="wlIcon-video" />
								</view>
							</view>
							<view v-else class="examine radius-bock">

								<view class="cover" :style="{
										backgroundImage:
											'url(' + item.image + ')'
									}" />
								<view class="live-meg">
									<span>直播中</span>
								</view>
								<view class="state flex justify-center align-center">
									<view class="text-xxl">
										<span>{{item.title || ''}}</span>
										<view>
											<view class="host-info"><img :src="item.host.avatar"
													alt="">{{item.host.name}}</view>
											<view class="host-live">{{item.start_time||''}}-{{item.end_time||''}}</view>
										</view>
									</view>
								</view>
							</view>
							<view class="padding-xs  text-bold5">
								<!-- <view class="text-cut-2">
									<view
										class="cu-tag sm radius margin-right-xs"
										:class="[typeList[item.type]]"
									>
										{{ item.type_text }}
									</view>
									{{ formatHtml(item.content) }}
								</view> -->
							</view>
							<!-- <view class="flex wanl-gray text-min padding-lr-xs justify-between">
								<view> -->
							<!-- <text>
										{{ $wanlshop.timeFormat(item.createtime, 'mm-dd') }} 发布
									</text> -->

							<!-- </view> -->
							<!-- <view
									:class="{ 'text-red': item.isLike === 1 }"
									@tap="handleLike(index)"
								>
									<text
										:class="[
											item.isLike === 1 ? 'wlIcon-yiguanzhu1' : 'wlIcon-likes'
										]"
									></text>
									<text class="margin-left-xs">{{ item.likes }}</text>
								</view> -->
							<!-- </view> -->
						</view>
					</view>
					<uni-load-more :status="data.loadingType" :content-text="contentText" />
				</view>
			</view>
		</view>
		<wanl-live-play v-if="playUrl" :screenHeight="screenHeight" :screenWidth="screenWidth" :source="playUrl" />
	</view>
</template>

<script>
	var system = uni.getSystemInfoSync();
	import {
		mapState
	} from 'vuex';
	import wanlLivePlay from '@/components/wanl-live/play';
	export default {
		components: {
			wanlLivePlay,
		},
		data() {
			return {
				screenHeight: system.screenHeight,
				screenWidth: system.screenWidth,
				headHeight: 0,
				headerOpacity: 0,
				windowHeight: 0,
				headTop: 0,
				isMyfind: false,
				loadingFollow: false,
				modalName: null,
				scrollAnimation: 300,
				userData: {
					user_no: '',
					user: {
						avatar: '',
						nickname: '加载中..'
					},
					follow: 0,
					fans: 0,
					likes: 0,
					praised: 0,
					color: '#e9dacd',
					image: '',
					isFollow: 0
				},
				playUrl: '',
				currentId: 0,
				typeList: {
					new: 'bg-gradual-yellow',
					live: 'wanl-bg-orange',
					want: 'bg-gradual-green',
					activity: 'bg-gradual-orange',
					show: 'wanl-bg-pink',
					video: 'wanl-bg-pink'
				},
				navList: [{
						type: 'works',

						dataList: [],
						loadingType: 'more',
						current_page: 1
					},

				],
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在疯狂加载中...',
					contentnomore: '我是有底线的'
				}
			};
		},
		computed: {
			...mapState(['common'])
		},
		onLoad(option) {
			// 计算页面尺寸
			let sys = this.$wanlshop.wanlsys();
			this.headTop = sys.top;
			this.headHeight = sys.height;
			this.windowHeight = sys.windowHeight;
			// 加载 Api
			if (option.id) {
				this.loadData(option);
			} else {
				this.loadData({
					id: null
				});
			}
		},
		// 下拉刷新
		onReachBottom() {
			this.loadFindData();
		},
		onPageScroll(e) {
			let tmpY = 170;
			e.scrollTop = e.scrollTop > tmpY ? 170 : e.scrollTop;
			this.headerOpacity = e.scrollTop * (1 / tmpY);
		},
		methods: {
			onClick(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/apps/find/details/live?id='+ item.id
				})
			},
			async loadData(data) {

				this.loadFindData();

			},
			loadFindData(source) {
				//这里是将订单挂载到tab列表下
				let navItem = this.navList[this.currentId];

				//判断是否最后一页
				if (navItem.loadingType == 'noMore') {
					return;
				}
				//tab切换只有第一次需要加载数据
				if (source === 'tabChange' && navItem.loaded === true) {
					return;
				}
				//防止重复加载
				if (navItem.loadingType === 'loading') {
					return;
				}
				navItem.loadingType = 'loading';

				// 获取列表
				this.$api.get({
					url: '/wanlshop/live/liveList',
					data: {
						// state:1
					},
					success: res => {
						console.log(res)
						if (res.data.length == 0) {
							navItem.loadingType = 'noMore';
							return;
						}
						navItem.current_page = res.current_page; //当前页码
						if (res.last_page === res.current_page) {
							navItem.loadingType = 'noMore';
						} else {
							navItem.loadingType = 'more';
							navItem.current_page++;
						}
						res.data.forEach(item => {
							console.log(item)
							navItem.dataList.push(item);
						});
						this.$set(navItem, 'loaded', true);
					}
				});
			},

			async handleLike(index) {
				if (this.$store.state.user.isLogin) {
					let data = this.navList[this.currentId].dataList[index];
					this.$api.post({
						url: '/wanlshop/find/user/setFindUser',
						data: {
							id: data.id,
							type: 'likes'
						},
						success: res => {
							if (res.data === 0) {
								data.likes -= 1;
							} else {
								data.likes += 1;
							}
							data.isLike = res.data;
						}
					});
				} else {
					this.$wanlshop.to('/pages/user/auth/auth');
				}
			},


			editTheme(data) {
				this.$api.post({
					url: '/wanlshop/find/user/editTheme',
					loadingTip: '更改主题中...',
					data: data,
					success: res => {
						this.userData.image = res.image;
						this.userData.color = res.color;
					}
				});
			},

			// 选择Tag
			handleSelect(index) {
				this.currentId = index;
				this.loadFindData('tabChange');
			},
			handleBack() {
				this.$wanlshop.back(1);
			},
			handleUserEdit() {
				this.$wanlshop.auth('/pages/user/setting/user');
			},
			// 格式化html
			formatHtml(content) {
				return content.replace(/<\/?.+?>/g, '').replace(/ /g, '');
			},
			// 弹出层
			showModal(name) {
				// 滚动下分享
				if (name == 'share' && this.modalName != 'share') {
					setTimeout(() => {
						this.scrollAnimation = 300;
					}, 300);
				}
				this.modalName = name;
			},
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					this.modalName = null;
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.wanlgroups-user-container__list {
		margin-top: 31rpx !important;
	}

	.wanlgroups-user-container {
		&__head {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 9;

			.background {
				position: absolute;
				left: 0;
				right: 0;
				z-index: 1;

				.bgcolor {
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.4);
				}
			}

			.navigater {
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: absolute;
				left: 0;
				right: 0;
				z-index: 9;
				padding-left: 25rpx;
				padding-right: 25rpx;
				/* #ifdef MP */
				padding-right: 220rpx;

				/* #endif */
				&>view {
					display: flex;
					align-items: center;
				}
			}
		}

		&__main {
			background-size: 100% auto;
			background-repeat: no-repeat;
			background-position-y: center;

			.text-white-agba {
				color: rgba(255, 255, 255, 0.9);
			}

			.head {
				padding: 0 30rpx;
				padding-bottom: 50rpx;
				background-color: rgba(0, 0, 0, 0.4);

				.userinfo {
					display: flex;
					align-items: center;

					.cu-avatar {
						width: 130rpx;
						height: 130rpx;
					}
				}

				.findinfo {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.quantity {
						display: flex;

						.project {
							width: 100rpx;
							margin-right: 10rpx;
							overflow: hidden;
						}
					}
				}

				.shopinfo {
					display: flex;
					align-items: center;
					justify-content: space-between;

					&.solid-top {
						&::after {
							border-top: 1rpx solid rgba(255, 255, 255, 0.92);
						}
					}

					.cu-avatar {
						background-color: rgba(0, 0, 0, 0.1);
						width: 65rpx;
						height: 65rpx;
					}

					.subject {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.info {
							&>view {
								display: flex;
								align-items: center;
							}
						}
					}
				}
			}
		}

		&__list {
			margin-top: -30rpx;
			border-radius: 24rpx 24rpx 0 0;
			padding-top: 2rpx;

			.questionbag {
				position: -webkit-sticky;
				position: sticky;
				z-index: 99;
				margin: 0 16rpx;
			}

			.main {
				.empty {
					padding-top: 100rpx;
					display: flex;
					justify-content: center;

					image {
						width: 320rpx;
						height: 320rpx;
					}
				}

				.list {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					padding: 0 16rpx;
					justify-content: space-between;

					.item {
						margin-bottom: 40rpx;
						flex: 0 0 calc((100% - 16rpx) / 2);
						overflow: hidden;

						.examine {
							height: 460rpx;
							position: relative;

							.cover {
								height: 460rpx;
								background-size: cover;
								background-position: center;
								background-repeat: no-repeat;

							}

							.state {
								position: absolute;
								top: 0;
								right: 0;
								left: 0;
								bottom: 0;

							}

							.live-meg {
								background-color: #F96361;
								position: absolute;
								right: 0rpx;
								top: 0px;

								span {
									color: #f0f0f0;
									padding: 10rpx;
								}
							}

							.text-xxl {
								font-size: 33rpx;
								color: #ffffff;
								margin-bottom: -178px;
								margin-left: -5px;

								span {}

								.host-info {
									margin-top: 10rpx;
									white-space: nowrap;
									overflow: hidden;
									display: inline-flex;

									img {
										width: 41rpx;
										height: 41rpx;
										border-radius: 50%;
										margin-right: 6rpx;

									}

								}

								.host-live {
									font-size: 28rpx;
									display: inline-block;
									margin-left: 20rpx;
									color: #f0f0f0;
								}
							}
						}
					}
				}
			}
		}

		&__modal {
			.praised {
				.cu-dialog {
					width: 70%;
					overflow: hidden;

					image {
						height: 100%;
					}
				}
			}
		}
	}
</style>
